<template>
    <div class="modal fade" id="edit_user_info" tabindex="-1" role="dialog"
         aria-labelledby="edit_user_info">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="popup_box">
                        <div class="g-form-line">
                            <div class="newList_left">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">
                                            <img src="../../assets/images/home_image/close.png" alt="" class="closeBtn">
                                        </span>
                                </button>
                                <img src="../../assets/images/home_image/info_portrait.png" alt=""
                                     class="newList_left_img">
                                <p class="font_1">香港辰阳技术有限公司</p>
                                <p class="font_2">登录账号 辰阳技术</p>
                            </div>
                            <div class="newList_right">
                                <span class="newList_right_top_text">我的资料</span>
                                <ul class="table_text">
                                    <li><span>联系人：</span>
                                        <div class="myDiv">
                                            <label>
                                                <input type="text" :placeholder="user.linkman"
                                                       v-model="linkman">
                                            </label>
                                        </div>
                                    </li>
                                    <li><span>联系电话：</span>
                                        <div class="myDiv">
                                            <label>
                                                <input type="text" readonly class="reset"
                                                       :placeholder="user.dealerPhone" v-model="phone">
                                                <button type="button" class="btn" @click="resetPhone">重置</button>
                                            </label>
                                        </div>
                                    </li>
                                    <li><span>联系邮箱：</span>
                                        <div class="myDiv">
                                            <label>
                                                <input type="text" :placeholder="user.userEmail" v-model="email">
                                            </label>
                                        </div>
                                    </li>
                                    <li><span>地址：</span>
                                        <div class="myDiv">
                                            <label>
                                                <input type="text" :placeholder="user.dealerAddress" v-model="address">
                                            </label>
                                        </div>
                                    </li>
                                    <li><span>时区：</span>
                                        <div class="myDiv">
                                            <label>
                                                <input type="text" class='timeZone' readonly
                                                       v-model="timeZone_new_list">
                                            </label>
                                        </div>
                                    </li>
                                </ul>
                                <div class="dropdown">
                                    <span class=" dropdown-toggle disabled text_6" type="button" id="dropdownMenu1"
                                          data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

                                          <img src="../../assets/images/home_image/transfer_pull.png" alt=""
                                               class="text_6_img">
                                    </span>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                        <li @click="getTime($event)" v-for="tab in tabs"><a href="#">{{tab.text}}</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-success  left_btn" @click="update">确定</button>
                                    <button type="button" class="btn btn-success export right_btn" data-dismiss="modal">
                                        取消
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            user: Object
        },
        data () {
            return {
                linkman: '',
                phone: '',
                email: '',
                address: '',
                timeZone_new_list: '',
                tabs: [
                    {text: '(UTC-12:00)国际日期变更线西'},
                    {text: '(UTC-11:00)萨摩亚群岛'},
                    {text: '(UTC-11:00)协调世界时-11'},
                    {text: '(UTC-10:00)夏威夷'},
                    {text: '(UTC-09:00)阿拉斯加'},
                    {text: '(UTC-08:00)太平洋时间 (美国和加拿大)'},
                    {text: '(UTC-08:00)下加利福尼亚州'},
                    {text: '(UTC-07:00)奇瓦瓦、拉巴斯、马萨特兰'},
                    {text: '(UTC-07:00)山地时间 (美国和加拿大)'},
                    {text: '(UTC-07:00)亚利桑那'},
                    {text: '(UTC-11:00)(UTC-06:00)瓜达拉哈拉、墨西哥城、蒙特雷'},
                    {text: '(UTC-06:00)萨斯喀彻温'},
                    {text: '(UTC-06:00)中部时间 (美国和加拿大)'},
                    {text: '(UTC-06:00)中美洲'},
                    {text: '(UTC-05:00)波哥大、利马、基多'},
                    {text: '(UTC-05:00)东部时间 (美国和加拿大)'},
                    {text: '(UTC-05:00)印第安那州(东部)'},
                    {text: '(UTC-04:30)加拉加斯'},
                    {text: '(UTC-04:00)大西洋时间(加拿大)'},
                    {text: '(UTC-04:00)库亚巴'},
                    {text: '(UTC-04:00)乔治敦、拉巴斯、马瑙斯、圣胡安'},
                    {text: '(UTC-04:00)圣地亚哥'},
                    {text: '(UTC-04:00)亚松森'},
                    {text: '(UTC-03:30)纽芬兰'},
                    {text: '(UTC-03:00)巴西利亚'},
                    {text: '(UTC-07:00)山地时间 (美国和加拿大)'},
                    {text: '(UTC-03:00)格陵兰'},
                    {text: '(UTC-03:00)卡宴、福塔雷萨'},
                    {text: '(UTC-03:00)蒙得维的亚'},
                    {text: '(UTC-02:00)协调世界时-02'},
                    {text: '(UTC-02:00)中大西洋'},
                    {text: '(UTC-01:00)佛得角群岛'},
                    {text: '(UTC-01:00)亚速尔群岛'},
                    {text: '(UTC+01:00)都柏林、爱丁堡、里斯本、伦敦'},
                    {text: '(UTC+01:00)卡萨布兰卡'},
                    {text: '(UTC+01:00)蒙罗维亚、雷克雅未克'},
                    {text: '(UTC+01:00)协调世界时'},
                    {text: '(UTC+01:00)阿姆斯特丹、柏林、伯尔尼、罗马、斯德哥尔摩、维也纳'},
                    {text: '(UTC+01:00)协调世界时'},
                    {text: '(UTC+01:00)贝尔格莱德、布拉迪斯拉发、布达佩斯、卢布尔雅那、布拉格'},
                    {text: '(UTC+01:00)布鲁塞尔、哥本哈根、马德里、巴黎'},
                    {text: '(UTC+01:00)萨拉热窝、斯科普里、华沙、萨格勒布'},
                    {text: '(UTC+01:00)温得和克'},

                ]
            }
        },
        methods: {
            getTime (event) {
                this.timeZone_new_list = event.target.innerHTML
            },
            resetPhone () {
                this.$ajax
                    .userInfo
                    .resetPhone(this.user.id)
                    .then((res) => {
                        let data = res.data
                        if (data.code === 200) {
                            this.$store.commit('showAlert', {success: this.$msgDictionary.updateSuc})
                            this.$emit('refreshMenu')
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else if (data.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    $('#update_self').modal('hide')
                                    this.$router.push('/login')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else {
                            this.$store.commit('showAlert', {error: data.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            update () {
                let regName = /^[\u4e00-\u9fa5a-zA-Z0-9_]{1,10}$/g
                if (this.userNickname !== '' && !regName.test(this.userNickname)) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.registerMsg.name})
                    return
                }
                let regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
                if (this.email !== '' && !regEmail.test(this.email)) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.email.errEmail})
                    return
                }
                let regPhone = /^1[3|4|5|8][0-9]\d{8}$/g
                if (this.phone !== '' && !regPhone.test(this.phone)) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.phoneError})
                    return
                }
                let params = {
                    userEmail: this.email !== '' ? this.email : this.user.userEmail,
                    userNickname: this.user.userNickname,
                    dealerAddress: this.address !== '' ? this.address : this.user.dealerAddress,
                    linkman: this.linkman !== '' ? this.linkman : this.user.linkman,
                }
                this.$ajax.userInfo
                    .updateUser(this.user.id, params)
                    .then((res) => {
                        let data = res.data
                        if (data.code === 200) {
                            this.$store.commit('showAlert', {success: this.$msgDictionary.updateSuc})
                            this.$emit('refreshMenu')
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    $('#edit_user_info').modal('hide')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else if (data.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    $('#edit_user_info').modal('hide')
                                    this.$router.push('/login')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else {
                            this.$store.commit('showAlert', {error: data.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            }
        },
    }

</script>
<style scoped>
    .modal-body {
        margin: 0;
        padding: 0;
    }

    .popup_box {
        width: 580px;
        height: 344px;
    }

    .g-form-line {
        float: left;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: hidden;
        text-align: center;
    }

    .newList_left {
        position: relative;
        width: 202px;
        height: 344px;
        background: #263238;
        float: left;
        text-align: center;
    }

    .closeBtn {
        position: absolute;
        left: 15px;
        top: 10px;
    }

    .newList_left_img {
        padding-top: 90px;
    }

    .newList_left .font_1 {
        color: rgb(23, 210, 156);
        margin-top: 18px;
        font-size: 14px;

    }

    .newList_left .font_2 {
        color: gray;
        margin-top: 15px;
        font-size: 12px

    }

    .newList_right {
        position: relative;
        top: 26px;
        width: 380px;
        height: 344px;
        margin-left: 202px;
        font-size: 16px;
        color: rgb(153, 153, 153);
    }

    .newList_right_top_text {
        position: absolute;
        font-size: 14px;
        color: rgb(23, 210, 156);
        left: 30px;
    }

    .newList_right input {
        border: 0;
        height: 22px;
        padding-right: 5px;
        color: rgb(23, 210, 156);
        margin-right: 5px;
    }

    .newList_right .table_text {
        position: absolute;
        top: 45px;
        left: 20px;
        font-size: 12px;
    }

    .newList_right .table_text li {
        height: 38px;
    }

    .table_text span {
        display: inline-block;
        width: 80px;
        font-size: 12px;
        text-align: left;
        padding-left: 10px;
    }

    .newList_right .myDiv {
        display: inline-block;
        border-bottom: solid 1px;
        border-color: rgb(204, 204, 204);
        text-align: left;
        line-height: 23px;
        width: 240px;
    }

    .newList_right .myDiv .reset {
        width: 163px;
    }

    .newList_right .myDiv .reset + .btn {
        background: #17D29C;
        color: #fff;
        padding: 2px 12px;
    }

    .newList_right .text_6 {
        position: absolute;
        top: -55px;
        padding-left: 90px;
    }

    .text_6_img {
        position: absolute;
        top: 255px;
        left: 130px;
        cursor: not-allowed;
    }

    .modal-footer {
        position: absolute;
        border: 0;
        left: 20px;
        top: 235px;
    }

    .dropdown-menu {
        position: fixed;
        top: 225px;
        overflow: scroll;
        height: 250px;
        left: 300px;
    }

</style>
